<%@ page import="team.bluepen.supermarket.data.entity.User" %>
<%@ page import="team.bluepen.supermarket.constant.Constant" %>
<%@ page import="team.bluepen.supermarket.data.entity.Good" %>
<%@ page import="team.bluepen.supermarket.data.dao.GoodRepository" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="team.bluepen.supermarket.data.dao.GoodRepository" %>
<%@ page import="team.bluepen.supermarket.constant.Role" %>
<%@ page import="team.bluepen.supermarket.constant.Error" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <%!
    GoodRepository goodRepository = new GoodRepository();
    List<Good> goods = new ArrayList<>();
  %>

  <%
    User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
  %>
<%--  商品管理页面--%>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
  <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
  <title>Manage - Supermarket Manage System</title>
</head>
<body>
<main>
  <%
    String state = request.getParameter("error");
    Error error = Error.getErrorByText(state);
  %>
  <%  if (error != null && !error.getState()) {%>
  <script>alert('Data Error!\n<%=error%>')</script>
  <%
    }
  %>
  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
    <a href="${pageContext.request.contextPath}/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
      <span class="fs-4">Supermarket Manage System</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="overview.jsp" class="nav-link link-dark" aria-current="page">
          Overview
        </a>
      </li>
      <%
        if (user != null && user.getRole() == Role.ADMIN) {
      %>
      <li>
        <a href="account.jsp" class="nav-link link-dark">
          Accounts
        </a>
      </li>
      <%
        }
      %>
      <li>
        <a href="manage.jsp" class="nav-link active">
          All Goods
        </a>
      </li>

      <li>
        <a href="query.jsp" class="nav-link link-dark">
          Goods Query
        </a>
      </li>
      <li>
        <a href="file.jsp" class="nav-link link-dark">
          File
        </a>
      </li>
    </ul>
    <hr>
    <div class="dropdown">
      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
        <strong><%=user.getUsername()%></strong>
      </a>
      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
        <li><a class="dropdown-item" href="setting.jsp">Settings</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><form method="post" action="api/logout-control">
          <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
        </form></li>
      </ul>
    </div>
  </div>
  <div class="d-flex flex-column p-4 flex-grow-1 allow-rolling">
    <h1>All Goods</h1>
    <div class="btn-group-vertical">
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#add_good">Add Good</button>
      <button class="btn btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#delete_good_all">Delete All</button>
    </div>
    <div class="d-flex flex-xl-row mt-3 flex-grow-1">
      <div class="d-flex flex-xl-column flex-grow-1">
        <table class="table table-hover">
          <caption>Goods</caption>
          <thead class="table table-hover"><tr>
            <td>ID</td>
            <td>Name</td>
            <td>Amount</td>
            <td>Price</td>
            <td>Status</td>
            <td>Action</td>
          </tr></thead>
          <tbody>
          <%
            goods.clear();
            goods.addAll(goodRepository.query());
          %>
          <%for(Good p : goods){%>
          <tr>
            <td><%=p.getId()%></td>
            <td><%=p.getName()%></td>
            <td><%=p.getAmount()%></td>
            <td><%=p.getPrice()%></td>
            <td><%=p.getState()%></td>
            <td>
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit_good"
                        data-bs-goodrow="<%=p.getRow()%>" data-bs-goodid="<%=p.getId()%>" data-bs-goodname="<%=p.getName()%>">Edit</button>
                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete_good" data-bs-goodrow="<%=p.getRow()%>"
                        data-bs-goodid="<%=p.getId()%>" data-bs-goodname="<%=p.getName()%>">Delete</button>
              </div>
            </td>
          </tr>
          <%}%>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="modal fade" id="add_good">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Good</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form action="api/good-add" method="post" name="add_good_form">
          <div class="modal-body">
            <input type="text" hidden id="good_row_add" name="good_row">
            <div class="alert alert-warning">
              Notice:
              <br>
              Price and amount cannot be negative number, if so, it will be transferred to 0.
            </div>
            <div class="">
              <label for="add_good_form_id_input">ID</label>
              <input class="form-control" id="add_good_form_id_input" type="text" name="good_id" placeholder="Enter good's id...">
            </div>
            <div class="">
              <label for="add_good_form_name_input">Name</label>
              <input class="form-control" id="add_good_form_name_input" type="text" name="good_name" placeholder="Enter good's name...">
            </div>
            <div class="">
              <label for="add_good_form_amount_input">Amount</label>
              <input class="form-control" id="add_good_form_amount_input" type="number" name="good_amount" placeholder="Enter good's amount...">
            </div>
            <div class="">
              <label for="add_good_form_price_input">Price</label>
              <input class="form-control" id="add_good_form_price_input" type="number" name="good_price" placeholder="Enter good's price...">
            </div>
            <div class="">
              <label for="add_good_form_status_select">Status</label>
              <select class="form-select" id="add_good_form_status_select" name="good_status">
                <option value ="u">On-Shelf</option>
                <option value ="d">Off-Shelf</option>
              </select>
            </div>
          </div>

          <div class="modal-footer">
            <div class="btn-group">
              <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Add</button>
              <button type="reset" class="btn btn-outline-secondary">Reset</button>
              <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="delete_good">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Delete Good</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form action="api/good-delete" method="post" name="delete_good_form">
          <div class="modal-body">
            <input type="text" hidden id="delete_good_row" name="good_row">
            <input type="text" hidden name="type" value="good">
            <div class="alert alert-danger">
              Notice:
              <br>
              <STRONG>It will be deleted in database, please check it again.</STRONG>
            </div>
            <p id="current_good_delete"></p>
          </div>

          <div class="modal-footer">
            <div class="btn-group">
              <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
              <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="modal fade" id="delete_good_all">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Delete All</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form action="api/good-delete" method="post" name="delete_good_form">
          <div class="modal-body">
            <input type="text" hidden name="type" value="all">
            <div class="alert alert-danger">
              Notice:
              <br>
              <STRONG>All data</STRONG> will be deleted, please confirm again!
            </div>
          </div>

          <div class="modal-footer">
            <div class="btn-group">
              <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Confirm</button>
              <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>


  <div class="modal fade" id="edit_good">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Good</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form action="api/good-edit" method="post" name="edit_good_form">
          <div class="modal-body">
            <input type="text" hidden id="edit_good_row" name="good_row">
            <div class="alert alert-warning">
              Notice:
              <br>If you don't want to change the name of the good or anything else, please just leave it blank.
              <br><br><strong>Also note: the status must be set manually, otherwise it will be set as on-shelf status.</strong>
            </div>
            <div class="alert alert-warning">
              Notice:
              <br>
              Price and amount cannot be negative number, if so, it will be transferred to 0.
            </div>
            <p id="current_good_edit"></p>
            <label>
              Name
              <input class="form-control" type="text" name="good_name" placeholder="Enter a new name...">
            </label>
            <label>
              Amount
              <input class="form-control" type="number" name="good_amount" placeholder="Enter the amount of the good...">
            </label>
            <label>
              Price
              <input class="form-control" type="number" name="good_price" placeholder="Enter the price of the good...">
            </label>
              <label>
                Status
                <select class="form-select" name="good_status">
                  <option value ="u">On-Shelf</option>
                  <option value ="d">Off-Shelf</option>
                </select>
              </label>
          </div>

          <div class="modal-footer">
            <div class="btn-group">
              <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
              <button type="submit" class="btn btn-outline-secondary" >Reset</button>
              <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    const deleteGoodModal = document.getElementById('delete_good');
    deleteGoodModal.addEventListener('show.bs.modal', function (event) {
      const button = event.relatedTarget;
      const goodRow = button.getAttribute('data-bs-goodrow');
      const goodId = button.getAttribute('data-bs-goodid');
      const goodName = button.getAttribute('data-bs-goodname');
      const goodRowInput = document.getElementById("delete_good_row");
      const goodCurrent = document.getElementById("current_good_delete");
      goodRowInput.value = goodRow;
      goodCurrent.innerHTML = "Good id: " + goodId + "<br>Good name: " + goodName;
    })

    const editGoodModal = document.getElementById('edit_good');
    editGoodModal.addEventListener('show.bs.modal', function (event) {
      const button = event.relatedTarget;
      const goodRow = button.getAttribute('data-bs-goodrow');
      const goodId = button.getAttribute('data-bs-goodid');
      const goodName = button.getAttribute('data-bs-goodname');
      const goodRowInput = document.getElementById("edit_good_row");
      const goodCurrent = document.getElementById("current_good_edit");
      goodRowInput.value = goodRow;
      goodCurrent.innerHTML = "Good's ID: " + goodId + "<br>Good's name: " + goodName;
    })
  </script>
</main>
</body>
</html>
